<template>
  <div class="dashboard-container">
    <div>
      <!-- <el-input style="width: 250px" placeholder="请输入内容" v-model="input4">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>-->
      <!-- <span class="fs-15">系统模块</span> -->
      <el-input
        v-model="query.system"
        clearable
        placeholder="请输入系统模块"
        class="marginBottom"
        style="width: 200px; margin: 0 10px"
      />
      <!-- <span class="fs-15">操作人员</span> -->
      <el-input
        v-model="query.operate"
        clearable
        placeholder="请输入操作人员"
        class="marginBottom"
        style="width: 200px;"
      />
      <!-- <span class="fs-15">类型</span> -->
      <!-- <el-input
        v-model="query.type"
        clearable
        placeholder="请输入类型"
        class="marginBottom"
        size="small"
        style="width: 200px; margin: 0 10px"
      />-->

      <el-select placeholder="请选择类型" v-model="query.type" class="ml-10 mr-10">
        <el-option
          :key="item.value"
          :label="item.name"
          :value="item.label"
          v-for="item in typeList"
        ></el-option>
      </el-select>
      <!-- <span class="fs-15">状态</span> -->
      <el-select placeholder="请选择状态" v-model="query.state" class>
        <el-option
          :key="item.value"
          :label="item.name"
          :value="item.label"
          v-for="item in stateList"
        ></el-option>
      </el-select>

      <!-- <span class="fs-15">操作时间</span> -->
      <el-date-picker
        v-model="query.time"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['12:00:00']"
        style="width: 250px; margin: 0 0 0 10px"
      />

      <el-button class="marginLeft" type="primary" :icon="Search">搜索</el-button>
      <el-button class="marginLeft" type :icon="Refresh" @click="reset">重置</el-button>
      <!-- <el-button type="danger" size="small" icon="el-icon-delete" plain>删除</el-button> -->
      <el-button type="danger" :icon="Delete" plain @click="tableData = []">清空</el-button>
      <el-button type="warning" :icon="Download" plain>导出</el-button>
    </div>

    <div>
      <el-card body-style="padding:10px" class="marginTop">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="日志编号" prop="id" />
          <el-table-column label="系统模块" prop="name" />
          <el-table-column label="操作类型" prop="monitor">
            <template #default="scope">
              <el-tag type="info">修改</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="请求方式" prop="type" />
          <el-table-column label="操作人员" prop="personnel" />
          <el-table-column label="操作地址" prop="address" />
          <el-table-column label="操作地点" prop="where" />
          <el-table-column label="操作状态" prop="monitor">
            <template #default="scope">
              <el-tag type="success">成功</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作日期" prop="nowCapacity" />
          <el-table-column label="操作" prop="monitor">
            <template #default="scope">
              <el-popconfirm @confirm="deleteFun(scope.row.id)" title="确定要删除这个数据吗？">
                <template #reference>
                  <el-button style="margin-left: 10px;" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { Search, Refresh, Plus, Download } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
let query = ref({
  system: '',
  operate: '',
  type: '',
  state: '',
  time: '',
})
let typeList = ref([
  {
    label: '0',
    name: '用户日志',
  },
  {
    label: '1',
    name: '系统日志',
  },
])

let form = ref({
  name: '',
  keyName: '',
  keyValue: '',
  notes: '',
  built_in: '',
})
let type = ref('create')
let visible = ref(false)
let submitComplete = ref(false)
let stateList = ref([
  {
    label: '0',
    name: '用户',
  },
  {
    label: '1',
    name: '系统',
  },
])
let tableData = ref([
  {
    id: 1,
    name: '个人信息',
    number: 'XY15153',
    type: 'PUT',
    personnel: 'cc123',
    address: '222.96.132.193',
    where: '安顺平坝',
    dieCapacity: '10000',
    nowCapacity: '2023-12-12 15:57:47',
    contacts: '张三',
  },
  {
    id: 23,
    name: '个人信息',
    number: 'XY15599',
    type: 'GET',
    personnel: 'admin',
    address: '222.98.895.180',
    where: '贵阳观山湖',
    dieCapacity: '10000',
    nowCapacity: '2023-12-12 15:57:47',
    contacts: '张三',
  },
])

// 在组件的 mounted 钩子函数中初始化 ECharts 实例并绘制图表

function reset() {
  console.log(99)
  query.value = {
    system: '',
    operate: '',
    type: '',
    state: '',
    time: '',
  }
}

function deleteFun(id) {
  const indexToRemove = tableData.value.findIndex((item) => item.id === id)
  if (indexToRemove !== -1) {
    tableData.value.splice(indexToRemove, 1)
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
::v-deep .el-table th.el-table__cell {
  background-color: #f8f8f9 !important;
}

::v-deep .el-table thead {
  color: #515a6e;
}
</style>
